<template>
  <div class="gva-form-box">
    <div class="container">
      <!-- PDC信息 -->
      <div class="info-card pdc-info">
        <span>PDC大小</span>
        <span class="blue-data">22,100GB</span>
        <el-form-item class="button-container">
          <el-button type="primary" icon="plus" @click="onSubmit">我要扩容</el-button>
        </el-form-item>
      </div>

      <div class="info-card space-info">
        <span>当前空间</span>
        <span class="blue-data">221GB</span>
      </div>

      <div class="info-card percent-info">
        <span>使用百分比</span>
        <span class="blue-data">51%</span>
      </div>

      <div class="info-card cash-info">
        <span>年费</span>
        <span class="blue-data">999元/年</span>
        <el-form-item class="button-container">
          <el-button type="primary" icon="plus" @click="onSubmit">立即充值</el-button>
        </el-form-item>
      </div>
    </div>
    <div>
      <div>
        <div class="table-wrapper">

          <h2 class="sticky-title">充值记录</h2>
          <div class="gva-btn-list">
          </div>
          <el-table :data="sortedTableData" @selection-change="handleSelectionChange" @sort-change="sortChange">
            <!--  <el-table-column type="selection" width="55" /> -->
            <el-table-column align="left" label="序号" min-width="80" prop="DID" sortable="custom" />
            <el-table-column align="left" label="充值余额" min-width="150" prop="userName" sortable="custom" />
            <el-table-column align="left" label="PDC大小" min-width="180" prop="idCard" />
            <el-table-column align="left" label="时间" min-width="150" prop="phone" />
            <!-- <el-table-column align="left" label="数据名称" min-width="150" prop="bankCard" />
            <el-table-column align="left" label="审核进度" min-width="150" prop="auditProgress" sortable="custom" />
            <el-table-column align="left" label="审核状态" min-width="150" prop="auditStatus" sortable="custom" /> -->
            <el-table-column align="left" fixed="right" label="操作" width="200">
              <template #default="scope">
                <el-button icon="edit" type="primary" link @click="openDrawer('编辑', scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="gva-pagination">
          <el-pagination
              :current-page="page"
              :page-size="pageSize"
              :page-sizes="[10, 30, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
          />
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { setSelfInfo, changePassword } from '@/api/user.js'
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
import{getTopUpList}from '@/api/getTopUpList'
import SelectImage from '@/components/selectImage/selectImage.vue'

defineOptions({
  name: 'addmoney',
})

const activeName = ref('second')
const rules = reactive({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '最少6个字符', trigger: 'blur' },
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '最少6个字符', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    { min: 6, message: '最少6个字符', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== pwdModify.value.newPassword) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
})

const userStore = useUserStore()
console.log('userStore：',userStore.userInfo)
const modifyPwdForm = ref(null)
const showPassword = ref(false)
const pwdModify = ref({})
const nickName = ref('')
const editFlag = ref(false)
const savePassword = async() => {
  modifyPwdForm.value.validate((valid) => {
    if (valid) {
      changePassword({
        password: pwdModify.value.password,
        newPassword: pwdModify.value.newPassword,
      }).then((res) => {
        if (res.code === 0) {
          ElMessage.success('修改密码成功！')
        }
        showPassword.value = false
      })
    } else {
      return false
    }
  })
}

const clearPassword = () => {
  pwdModify.value = {
    password: '',
    newPassword: '',
    confirmPassword: '',
  }
  modifyPwdForm.value.clearValidate()
}

watch(() => userStore.userInfo.headerImg, async(val) => {
  const res = await setSelfInfo({ headerImg: val })
  if (res.code === 0) {
    userStore.ResetUserInfo({ headerImg: val })
    ElMessage({
      type: 'success',
      message: '设置成功',
    })
  }
})

const openEdit = () => {
  nickName.value = userStore.userInfo.nickName
  editFlag.value = true
}

const closeEdit = () => {
  nickName.value = ''
  editFlag.value = false
}

const enterEdit = async() => {
  const res = await setSelfInfo({
    nickName: nickName.value
  })
  if (res.code === 0) {
    userStore.ResetUserInfo({ nickName: nickName.value })
    ElMessage({
      type: 'success',
      message: '设置成功',
    })
  }
  nickName.value = ''
  editFlag.value = false
}

const handleClick = (tab, event) => {
  console.log(tab, event)
}

const changePhoneFlag = ref(false)
const time = ref(0)
const phoneForm = reactive({
  phone: '',
  code: ''
})

const getCode = async() => {
  time.value = 60
  let timer = setInterval(() => {
    time.value--
    if (time.value <= 0) {
      clearInterval(timer)
      timer = null
    }
  }, 1000)
}

const closeChangePhone = () => {
  changePhoneFlag.value = false
  phoneForm.phone = ''
  phoneForm.code = ''
}

const getTableData = async () => {
  try {
    const response = await getTopUpList();
    if (response.data) {
      const data = response.data

    } else {
      console.error('Error fetching data:', response.data)
    }


  } catch (error) {
    // console.error('API Error:', error);
    // ElMessage.error('获取数据失败');
  }
}
getTableData()
const changePhone = async() => {
  const res = await setSelfInfo({ phone: phoneForm.phone })
  if (res.code === 0) {
    ElMessage.success('修改成功')
    userStore.ResetUserInfo({ phone: phoneForm.phone })
    closeChangePhone()
  }
}

const changeEmailFlag = ref(false)
const emailTime = ref(0)
const emailForm = reactive({
  email: '',
  code: ''
})

const getEmailCode = async() => {
  emailTime.value = 60
  let timer = setInterval(() => {
    emailTime.value--
    if (emailTime.value <= 0) {
      clearInterval(timer)
      timer = null
    }
  }, 1000)
}

const closeChangeEmail = () => {
  changeEmailFlag.value = false
  emailForm.email = ''
  emailForm.code = ''
}

const changeEmail = async() => {
  const res = await setSelfInfo({ email: emailForm.email })
  if (res.code === 0) {
    ElMessage.success('修改成功')
    userStore.ResetUserInfo({ email: emailForm.email })
    closeChangeEmail()
  }
}

</script>

<style scoped lang="scss">
.warning {
  color: #dc143c;
}
.container {
  display: flex;
  justify-content: space-between;
  max-width: 2000px;
  margin: 0 auto;
  padding: 20px;
}

.info-card {
  flex: 1; /* 确保每个卡片占据相同的宽度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid #ccc;
  margin-right: 20px;
}

.info-card:last-child {
  margin-right: 0; /* 移除最后一个卡片的右边距 */
}

.blue-data {
  color: blue;
  font-size: 1.5em; /* 设置更大的字体大小 */
}

.button-container {
  justify-content: flex-end; /* 将按钮对齐到右侧 */
  align-self: flex-end; /* 将按钮对齐到右侧 */
  margin-top: auto; /* 将按钮对齐到底部 */
}

</style>
